<template>
  <div>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
          <el-form-item label="经纬度" prop="LngLat">
            <el-input
              v-model="queryParams.LngLat"
              placeholder="请输入经纬度"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('经纬度')">根据经纬度搜索位置</el-button>
          </el-form-item>
          <el-form-item label="基站信息" prop="Base">
            <el-input
              v-model="queryParams.Base"
              placeholder="请输入基站信息"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('基站信息')">根据基站信息搜索位置</el-button>
            <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleAccurateQuery">精确搜索(每日限用次数100)</el-button> -->
          </el-form-item>
          <el-form-item label="Macs" prop="Macs">
              <el-input
                v-model="queryParams.Macs"
                placeholder="请输入mac信息"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('Macs')">根据macs搜索位置</el-button>
              <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleAccurateQuery">精确搜索(每日限用次数100)</el-button> -->
            </el-form-item>
      </el-form>
    </div>
    <div>
      
    </div>
    <div>
      {{ this.location_info }}
      <div id="mapContainer"></div>
    </div>
  </div>

  
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
// import MapContainer from "../amap/components/MapContainer.vue";
export default {
  name: "amap",
  // components: { MapContainer },
  data() {
    return {
      // 地图信息
      location_info:null,
      // 地图容器
      map:'',
      // 检索方式集合
      searchWay_list:[
        {value:'经纬度',label:'经纬度'},
        {value:'基站信息',label:'基站信息'}
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 查询参数
      queryParams: {
        LngLat:'',//经纬度
        Base:'',//基站信息
        Macs:'',//mac信息
      },
      
    };
  },
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  created() {
  },
  methods: {
    /** 精确检索 */
    AccurateQueryLocation(){
      if(!this.queryParams.SearchWay){
        this.$message.warning("请选择定位检索方式");
        return;
      }
      if(this.queryParams.SearchWay == '经纬度'){
        if(!this.queryParams.Lng ||!this.queryParams.Lat){
          this.$message.warning("经纬度不能为空");
          return;
        }
        this.map.destroy();
        this.map.center = [this.queryParams.Lng, this.queryParams.Lat];
        this.map = new AMap.Map("mapContainer", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 17, // 初始化地图级别
          resizeEnable: true,
          center: [this.queryParams.Lng, this.queryParams.Lat], // 初始化地图中心点位置
        });

        var marker = new AMap.Marker({
          offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
            position: new AMap.LngLat(this.queryParams.Lng, this.queryParams.Lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '目标点',
            icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
            offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
        });
        this.map.add(marker);//添加到地图
      }
      if(this.queryParams.SearchWay == '基站信息'){
        if(!this.queryParams.Base){
          this.$message.warning("基站信息不能为空");
          return;
        }
        //去掉空格,并替换掉中文的逗号
        this.queryParams.Base = this.queryParams.Base.replace(/ /g, "");
        this.queryParams.Base = this.queryParams.Base.replace(/，/g, ",");        
        // 基站信息例子bts_info":"460,0,22457,80609665,-67"
        // 基站信息例子bts_info":"  460,0,22457,80609665,-51"
        // 120.200146,30.186069
        let Base_list = this.queryParams.Base.split(',')
        if(Base_list.length!= 5){
          this.$message.warning("基站信息格式不正确");
          return;
        }
        let cellList='cellList='+JSON.stringify({"cellList":[{"mnc":1,"cellType":"Gsm","isMainCell":true,"mcc":460,"cellId":3439381,"freshness":0,"signal":-113,"lac":4149},{"mnc":1,"cellType":"Gsm","isMainCell":true,"mcc":460,"cellId":3439381,"freshness":0,"signal":-51,"lac":4149}]})+'&lon=120.200146&lat=30.186069';
        // var url = "https://dev-genius.senseuni.com/amap/poi";  
        // var url = `https://restapi.amap.com/v5/position/poi?key=f50c6e6e870859e3fe1ce8f20ffa8892`;  
        var url = window.location.protocol +'//'+window.location.hostname+"/amap/poi";  
        var xhr = new XMLHttpRequest();  
        xhr.open("POST", url, true); 
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
        xhr.send(cellList);  
        let that=this
        xhr.onreadystatechange = function() { 
          if(xhr.readyState === 4){
            console.log("调用成功",xhr.responseText)
            let backJson = JSON.parse(xhr.responseText)
            console.log(backJson)
            // //经度、纬度
            // let Lng = backJson.position.location.split(",")[0]
            // let Lat = backJson.position.location.split(",")[1]
            // // 销毁上一份地图容器
            // that.map.destroy();
            // // 新建一个地图容器，以获取到的经纬度作为中心点
            // that.map = new AMap.Map("mapContainer", {
            //   // 设置地图容器id
            //   viewMode: "3D", // 是否为3D地图模式
            //   zoom: 20, // 初始化地图级别
            //   resizeEnable: true,
            //   center: [Lng, Lat], // 初始化地图中心点位置
            // });
            // // 添加一个标记
            // var marker = new AMap.Marker({
            //     position: new AMap.LngLat(Lng, Lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            //     title: backJson.addressComponent.country+backJson.addressComponent.province+backJson.addressComponent.city+backJson.addressComponent.district+backJson.addressComponent.street+backJson.addressComponent.road+'-'+backJson.addressComponent.poi,
            //     icon:'//vdata.amap.com/icons/b18/1/2.png'
            // });
            // that.map.add(marker);//添加到地图
            // //设置圆形位置
            // var center = new AMap.LngLat(Lng, Lat);
            // //设置圆的半径大小
            // var radius = backJson.position.radius;
            // var circle = new AMap.Circle({
            //   center: center, //圆心
            //   radius: radius, //半径
            //   borderWeight: 3, //描边的宽度
            //   strokeColor: "#FF33FF", //轮廓线颜色
            //   strokeOpacity: 1, //轮廓线透明度
            //   strokeWeight: 6, //轮廓线宽度
            //   fillOpacity: 0.4, //圆形填充透明度
            //   strokeStyle: "dashed", //轮廓线样式
            //   strokeDasharray: [10, 10],
            //   fillColor: "#1791fc", //圆形填充颜色
            //   zIndex: 50, //圆形覆盖物的叠加顺序
            // });
            // //圆形 Circle 对象添加到 Map
            // that.map.add(circle);
            // //根据覆盖物范围调整视野
            // that.map.setFitView([ circle ])

          }

        }

      }
    },
    /** 检索 */
    QueryLocation(mark){
      // if(!this.queryParams.SearchWay){
      //   this.$message.warning("请选择定位检索方式");
      //   return;
      // }
      if(mark == '经纬度'){
        if(!this.queryParams.LngLat){
          this.$message.warning("经纬度不能为空");
          return;
        }
        //去掉空格,并替换掉中文的逗号
        this.queryParams.LngLat = this.queryParams.LngLat.replace(/ /g, "");
        this.queryParams.LngLat = this.queryParams.LngLat.replace(/，/g, ",");   
        //经度纬度
        let Lng = this.queryParams.LngLat.split(',')[0]
        let Lat = this.queryParams.LngLat.split(',')[1]
        this.map.destroy();
        this.map.center = [Lng, Lat];
        this.map = new AMap.Map("mapContainer", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 17, // 初始化地图级别
          resizeEnable: true,
          center: [Lng, Lat], // 初始化地图中心点位置
        });

        var marker = new AMap.Marker({
            position: new AMap.LngLat(Lng, Lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '目标点',
            icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
            offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
        });
        this.map.add(marker);//添加到地图
      }
      if(mark == '基站信息'){
        if(!this.queryParams.Base){
          this.$message.warning("基站信息不能为空");
          return;
        }
        //去掉空格,并替换掉中文的逗号
        this.queryParams.Base = this.queryParams.Base.replace(/ /g, "");
        this.queryParams.Base = this.queryParams.Base.replace(/，/g, ",");        
        // 基站信息例子bts_info":"460,0,22457,48291009,-55"
        const params = {
          // key: "f50c6e6e870859e3fe1ce8f20ffa8892",
          accesstype:1, //	移动端接入网络方式 0-未知 1-移动网络 2-wifi
          network:'GSM',
          cdma:0, //手机卡是否为CDMA卡，可选值： cdma-0，cdma-1
          bts: this.queryParams.Base + ',0',
          // output: 'json',
          show_fields:'addressComponent',
          extensions:'debug'
        }
        let str
        str = '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
        // var url = "https://restapi.amap.com/v5/position/IoT";  
        // var url = "https://dev-genius.senseuni.com/amap/IoT" + str; 
        var url = window.location.protocol +'//'+window.location.hostname+"/amap/IoT"+str;  
        // var url = "https://restapi.amap.com/v5/position/IoT?" +str ;  
        var xhr = new XMLHttpRequest();  
        xhr.open("POST", url, true); 
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");  
        xhr.send();  
        let that=this
        xhr.onreadystatechange = function() { 
          if(xhr.readyState === 4){
            let backJson = JSON.parse(xhr.responseText)
            //经度、纬度
            let Lng = backJson.position.location.split(",")[0]
            let Lat = backJson.position.location.split(",")[1]
            // 销毁上一份地图容器
            that.map.destroy();
            // 新建一个地图容器，以获取到的经纬度作为中心点
            that.map = new AMap.Map("mapContainer", {
              // 设置地图容器id
              viewMode: "3D", // 是否为3D地图模式
              zoom: 16, // 初始化地图级别
              resizeEnable: true,
              center: [Lng, Lat], // 初始化地图中心点位置
            });
            // 添加一个标记
            var marker = new AMap.Marker({
              offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                position: new AMap.LngLat(Lng, Lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: backJson.addressComponent.country+backJson.addressComponent.province+backJson.addressComponent.city+backJson.addressComponent.district+backJson.addressComponent.street+backJson.addressComponent.road+'-'+backJson.addressComponent.poi,
                icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png'
            });
            marker.setLabel({
                direction:'right',
                offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
                content: backJson.addressComponent.country+backJson.addressComponent.province+backJson.addressComponent.city+backJson.addressComponent.district+backJson.addressComponent.street+backJson.addressComponent.road+'-'+backJson.addressComponent.poi, //设置文本标注内容
            });
            that.map.add(marker);//添加到地图
            //设置圆形位置
            var center = new AMap.LngLat(Lng, Lat);
            //设置圆的半径大小
            var radius = backJson.position.radius;
            var circle = new AMap.Circle({
              center: center, //圆心
              radius: radius, //半径
              borderWeight: 3, //描边的宽度
              strokeColor: "#FF33FF", //轮廓线颜色
              strokeOpacity: 1, //轮廓线透明度
              strokeWeight: 6, //轮廓线宽度
              fillOpacity: 0.4, //圆形填充透明度
              strokeStyle: "dashed", //轮廓线样式
              strokeDasharray: [10, 10],
              fillColor: "#1791fc", //圆形填充颜色
              zIndex: 50, //圆形覆盖物的叠加顺序
            });
            //圆形 Circle 对象添加到 Map
            that.map.add(circle);
            //根据覆盖物范围调整视野
            that.map.setFitView([ circle ])

          }

        }
      }
      if(mark == 'Macs'){
        if(!this.queryParams.Macs){
          this.$message.warning("macs信息不能为空");
          return;
        }
        // 基站信息例子bts_info":"460,0,22457,48291009,-55"
        const params = {
          // key: "f50c6e6e870859e3fe1ce8f20ffa8892",
          accesstype:1, //	移动端接入网络方式 0-未知 1-移动网络 2-wifi
          // network:'GSM',
          cdma:0, //手机卡是否为CDMA卡，可选值： cdma-0，cdma-1
          // bts: this.queryParams.Base + ',0',
          // output: 'json',
          macs:this.queryParams.Macs,
          // show_fields:'addressComponent',
          // extensions:'debug'
        }
        let str  ;
        str =  '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
        // var url = "https://restapi.amap.com/v5/position/IoT";  
        // var url = "https://apilocate.amap.com/position?" +str ;  
        // var url = "https://dev-genius.senseuni.com/amap"  + str ;  
        var url = window.location.protocol +'//'+window.location.hostname+"/amap"+str;  
        var xhr = new XMLHttpRequest();  
        xhr.open("GET", url, true); 
        xhr.send();  
        let that=this
        xhr.onreadystatechange = function() { 
          if(xhr.readyState === 4){
            let backJson = JSON.parse(xhr.responseText)
            that.location_info = backJson.result;
            if(backJson.info == 'OK'){
              //经度、纬度
              let Lng = backJson.result.location.split(",")[0]
              let Lat = backJson.result.location.split(",")[1]
              // 销毁上一份地图容器
              that.map.destroy();
              // 新建一个地图容器，以获取到的经纬度作为中心点
              that.map = new AMap.Map("mapContainer", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 25, // 初始化地图级别
                resizeEnable: true,
                center: [Lng, Lat], // 初始化地图中心点位置
              });
              // 添加一个标记
              var marker = new AMap.Marker({
                  offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                  position: new AMap.LngLat(Lng, Lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                  title: backJson.result.desc,
                  icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
              });
              marker.setLabel({
                  direction:'right',
                  offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
                  content: backJson.result.desc, //设置文本标注内容
              });
              // 缩小放大
              var toolbar = new AMap.ToolBar(); 
              that.map.addControl(toolbar)
              // 指南针
              var controlBar = new AMap.ControlBar(); 
              that.map.addControl(controlBar)
              // 地图类型
              var mapType = new AMap.MapType(); 
              that.map.addControl(mapType)
              // 鹰眼
              var hawkEye = new AMap.HawkEye(); 
              that.map.addControl(hawkEye)

              var geolocation = new AMap.Geolocation(); 
              that.map.addControl(geolocation)
              that.map.add(marker);//添加到地图
              //设置圆形位置
              var center = new AMap.LngLat(Lng, Lat);
              //设置圆的半径大小
              var radius = backJson.result.radius;
              var circle = new AMap.Circle({
                center: center, //圆心
                radius: radius, //半径
                borderWeight: 3, //描边的宽度
                strokeColor: "#FF33FF", //轮廓线颜色
                strokeOpacity: 1, //轮廓线透明度
                strokeWeight: 6, //轮廓线宽度
                fillOpacity: 0.4, //圆形填充透明度
                strokeStyle: "dashed", //轮廓线样式
                strokeDasharray: [10, 10],
                fillColor: "#1791fc", //圆形填充颜色
                zIndex: 50, //圆形覆盖物的叠加顺序
              });
              //圆形 Circle 对象添加到 Map
              that.map.add(circle);
              //根据覆盖物范围调整视野
              that.map.setFitView([ circle ])
            }



          }

        }

      }
    },
    /** 搜索按钮操作 */
    handleQuery(mark) {
      this.QueryLocation(mark);
    },
    /** 精确搜索按钮 */
    handleAccurateQuery(){
      this.AccurateQueryLocation();
    },
    // 取消按钮
    cancel() {
      this.dialogRename = false;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.name_list = selection.map(item => item.name)
      this.selectFiles = selection
    },
    initAMap() {
      AMapLoader.load({
        key: "f1b6ea56f74c4fd4ca34a2b33aea63aa", // 申请好的Web端开发者Key，首次调用 load 时必填 已填加至白名单
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ControlBar','AMap.HawkEye','AMap.ToolBar','AMap.Geolocation','AMap.Geocoder','AMap.MapType'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 注册容器
          this.map = new AMap.Map("mapContainer", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 17, // 初始化地图级别
            resizeEnable: true,
            // center: [120.21551, 30.25308], // 初始化地图中心点位置
          });
          // 缩小放大
          var toolbar = new AMap.ToolBar(); 
          this.map.addControl(toolbar)
          // 指南针
          var controlBar = new AMap.ControlBar(); 
          this.map.addControl(controlBar)
          // 地图类型
          var mapType = new AMap.MapType(); 
          this.map.addControl(mapType)
          // 鹰眼
          var hawkEye = new AMap.HawkEye(); 
          this.map.addControl(hawkEye)

          var geolocation = new AMap.Geolocation(); 
          this.map.addControl(geolocation)
          var lnglat  = [120.21551, 30.25308]
          // 添加一个标记
          var marker = new AMap.Marker({
              offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
              position: new AMap.LngLat(120.21551, 30.25308),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: '当前所在',
              icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png'
          });
          this.map.add(marker);//添加到地图
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onComplete(data){
      console.log("获取浏览器当前定位成功",data)
    },
    onError(data){
      console.log("获取浏览器当前定位失败",data)
    }
  }
};
</script>
<style lang="scss">
#mapContainer{
    padding:0px;
    margin: 0px;
    width: 100%;
    height: 800px;
}
</style>
